<template>
  <div class="container">
    <!-- 标题 -->
    <h1 class="media-title">医疗</h1>
    <!-- 职务列表 -->
    <div class="job-boxes">
      <router-link to="/medical1" class="job-box">
        外科医生<br>
        <span class="vacancy">空缺人数：3</span><br>
        <span class="salary">工资：20-30K</span>
      </router-link>
      <router-link to="/medical2" class="job-box">
        内科医生<br>
        <span class="vacancy">空缺人数：2</span><br>
        <span class="salary">工资：18-28K</span>
      </router-link>
      <router-link to="/medical3" class="job-box">
        护士<br>
        <span class="vacancy">空缺人数：5</span><br>
        <span class="salary">工资：15-25K</span>
      </router-link>
      <router-link to="/medical4" class="job-box">
        护士长<br>
        <span class="vacancy">空缺人数：1</span><br>
        <span class="salary">工资：22-32K</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MedicalInterface',
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
  background-image: url('@/assets/medical.jpg'); /* 使用相对路径引用图片 */
  background-size: cover; /* 确保图片覆盖整个容器 */
  background-position: center; /* 图片居中 */
  background-repeat: no-repeat; /* 图片不重复 */
}

.media-title {
  margin-bottom: 20px;
  padding: 10px; /* 添加内边距，使背景色更大 */
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
  color: white; /* 文字颜色为白色 */
  border-radius: 5px; /* 可选：圆角效果 */
}

.job-boxes {
  display: block; /* 修改为 block，以使每个 job-box 在单独的一行 */
}

.job-box {
  width: 1000px;
  height: 120px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
  display: flex;
  flex-direction: column; /* 纵向排列子元素 */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 10px; /* 添加底部间距 */
  text-decoration: none; /* 去除默认的链接下划线 */
  color: black; /* 设置链接颜色 */
}

.vacancy {
  font-size: 16px; /* 设置空缺人数的字体大小 */
  color: #333; /* 设置空缺人数的颜色 */
}

.salary {
  font-size: 16px; /* 设置工资的字体大小 */
  color: #333; /* 设置工资的颜色 */
}
</style>